<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>用户中心</span></div>
			<div class="h_right">
				<i class="iconfont icongengduo" style="visibility: hidden;"></i>
			</div>
		</header>

		<div class="main">
			<ul>
				<li>
					<div class="li_left">
						<span>头像</span>
					</div>
					<div class="li_right">
						<div class="pic">
							<img :src="userInfo.portrait" />
							<input type="file" id="file" accept="image/*" @change="fileChang" />
							<label for="file"></label>
						</div>
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<span>手机号</span>
					</div>
					<div class="li_right">
						<span>15877220425</span>
						<i class="iconfont iconarrowRight-fill" style="visibility: hidden;"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<span>居住地址</span>
					</div>
					<div class="li_right" @click="show_city_picker=true;">
						<span>{{userInfo.city}}</span>
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
				<li>
					<div class="li_left">
						<span>生日</span>
					</div>
					<div class="li_right" @click="show_datetime_picker=true;">
						<span>{{userInfo.birthday}}</span>
						<i class="iconfont iconarrowRight-fill"></i>
					</div>
				</li>
			</ul>
		</div>

		<footer>
			<div class="btn" @click="exitLogin"><span>退出登录</span></div>
		</footer>

		<!--日期选择器-->
		<van-action-sheet v-model="show_datetime_picker" @cancel="show_datetime_picker=false;">
			<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" cancel-button-text="cancel" confirm-button-text="ok" @confirm="editBirthday" @cancel="isShow=false;" />
		</van-action-sheet>

		<!--上拉框-->
		<van-action-sheet v-model="show_city_picker" :actions="cityList" @select="editAddr" />
	</div>
</template>

<script>
	var _this = null;
	import { Toast, ActionSheet, DatetimePicker, } from 'vant';

	export default {
		data() {
			return {
				show_city_picker: false,
				show_datetime_picker: false,
				currentDate: new Date(),
				minDate: new Date(1800, 1, 1),
				maxDate: new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
				userInfo: {
					portrait: require("../../../assets/images/public/portraits.jpg"),
					birthday: '1994-12-16',
					city: '广州',
				},
				cityList: [{
						name: '广州',
						code: 0,
					},
					{
						name: '深圳',
						code: 1,
					},
					{
						name: '上海',
						code: 2,
					}, {
						name: '北京',
						code: 3,
					}
				],
			};
		},
		watch: {},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {
			_this = this;
		},
		mounted() {},
		methods: {
			async editBirthday(item) {
				this.show_datetime_picker = false;
				let str = item.toLocaleDateString().split('/');
				if(str[1] < 10) str[1] = '0' + str[1];
				if(str[2] < 10) str[2] = '0' + str[2];
				this.userInfo.birthday = str.join('-');
			},
			editAddr(item) {
				this.show_city_picker = false;
				this.userInfo.city = item.name;
			},
			fileChang(e) {
				let el = e.currentTarget; //获取元素
				let fileObj = el.files[0];
				let reader = new FileReader();
				reader.readAsDataURL(fileObj);
				reader.onload = function(e) {
					let base64 = this.result;
					_this.userInfo.portrait = base64;
					//let blob = _this.dataURLtoBlob(base64);
					el.value = '';
				}
			},
			//将base64转换为blob
			dataURLtoBlob(dataurl) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while(n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			//将blob转换为base64
			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function(e) {
					callback(e.target.result);
				}
			},
			exitLogin() {
				Toast({
					duration: 1500,
					message: "不允许退出，你死心吧！",
					forbidClick: true,
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
	}
	
	//main
	.main {
		height: 100%;
		padding: rem(90) 0 0 0;
		.all_order {
			.li_right {
				span {
					color: $theme-color;
				}
			}
		}
		ul {
			margin: 0 0 rem(20) 0;
			li {
				height: rem(100);
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 rem(20);
				box-sizing: border-box;
				border-bottom: rem(1) solid #eee;
				&:last-child {
					border: none;
				}
				.li_left {
					display: flex;
					align-items: center;
					img {
						width: rem(40);
						margin: 0 rem(10) 0 0;
					}
					span {
						font-size: rem(28);
						color: $fc;
					}
				}
				.li_right {
					display: flex;
					align-items: center;
					span {
						font-size: rem(28);
						color: #999;
						margin: 0 rem(20) 0 0;
					}
					i {
						font-size: rem(36);
						color: $fc;
					}
					.pic {
						width: rem(90);
						height: rem(90);
						margin: 0 rem(20) 0 0;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						border-radius: 50%;
						background: #F8F8F8;
						position: relative;
						img {
							width: 100%;
						}
						input {
							width: 0;
							height: 0;
							position: absolute;
							z-index: -2;
						}
						label {
							position: absolute;
							z-index: 1;
							width: 100%;
							height: 100%;
							background: #000;
							opacity: 0;
						}
					}
				}
			}
		}
	}
	
	footer {
		width: 100%;
		padding: 0 rem(20);
		position: fixed;
		bottom: rem(40);
		left: 0;
		z-index: 1;
		.btn {
			height: rem(80);
			display: flex;
			justify-content: center;
			align-items: center;
			background: $theme-color;
			border-radius: rem(50);
			span {
				font-size: rem(28);
				color: #fff;
			}
		}
	}
</style>